<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Mechvibes</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
    <link rel="shortcut icon" type="image/png" href="./assets/icon.png" />
    <link rel="stylesheet" href="./assets/milligram.min.css" />
    <link rel="stylesheet" href="./assets/app.css" />
  </head>

  <body style="padding: 2rem; padding-bottom: 0;">
    <div id="app-logo">
      <div id="logo">Loading...</div>
    </div>

    <div id="app-body" class="loading">
      <div style="position: relative;text-align: center;font-size: 12px;">
        <div id="mechvibes-muted" class="hidden alert" style="position:absolute;top:-36px;left:0;right:0;">
          Mechvibes is currently muted.
        </div>
        <div id="system-muted" class="hidden alert" style="position:absolute;top:-36px;left:0;right:0;">
          Your system sounds are currently muted.
        </div>
      </div>
      <table style="display: table">
        <tbody>
          <tr>
            <td colspan="2">
              <select id="pack-list" class="custom-input mb-0" style="width: 100%; margin-right: 10px"></select>
              <div style="display: flex; justify-content: space-between;">
                <small>
                  <a id="random-button" style="cursor: pointer">Set random sound</a>
                </small>
                <small>
                  <a href="https://mechvibes.com/sound-packs/" class="open-in-browser">More sounds...</a>
                </small>
              </div>
            </td>
          </tr>
          <tr>
            <td style="width: 50%;padding-top:0;padding-bottom: 0;">Volume <span id="volume-value-display" style="font-weight: bold"></span></td>
          </tr>
          <tr>
            <td colspan="2" style="padding-top:0;padding-bottom:0;">
              <input type="range" min="0" max="200" value="20" step="5" class="slider mb-0" id="volume" style="width: 100%" />
              <div class="warning-levels">
                <div class="warning-level" style="width: 50%"></div>
                <div class="warning-level" style=""></div>
                <div class="warning-level" style=""></div>
                <div class="warning-level" style=""></div>
              </div>
            </td>
          </tr>
          <tr class="checkbox-group" id="tray_icon_toggle_group">
            <td style="width: 50%">Show Tray Icon</td>
            <td style="width: 50%">
              <div style="display:grid;grid-template-columns: 1em auto;font-size: 2rem;justify-content:right;">
                <input type="checkbox" class="checkbox mb-0" id="tray_icon_toggle" checked/>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="divider"></div>
      <div style="color: #666; font-size: 12px; text-align: center">
        <p>Made with ❤ by <a href="https://github.com/hainguyents13/mechvibes/" class="open-in-browser">hainguyents13</a></p>
        <div style="display:flex;gap:1em;justify-content: center;">
          <a href="https://mechvibes.com" class="open-in-browser">Home page</a>
          <span>|</span>
          <a href="https://buymeacoff.ee/hainguyents13" class="open-in-browser">Buy me a coffee</a>
          <!-- 
            Though access to the advanced window can be disabled by the server,
            it's important to remember that users can *always* disable remote debugging
            via the link in div#remote-in-use
          -->
          <span id="debug-options-seperator" class="hidden">|</span>
          <a href="#" id="open-debug-options" class="hidden">Advanced</a>
        </div>
        <p id="app-version" style="color: #999">-</p>
        <div style="position: relative;">
          <div id="update-available" class="hidden alert">
            New version of Mechvibes is available (<span id="new-version">-</span>)
            <div style="margin-top: 5px">
              <a href="https://mechvibes.com/download/" class="open-in-browser">Check it out</a>
            </div>
          </div>
          <div id="remote-in-use" class="hidden alert" style="position: absolute;top:-66px;left:0;right:0;padding:0;">
            <a href="#" id="quick-disable-remote">Click here</a> to disable remote debugging.
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
